<template>
  <div>
    <a-breadcrumb style="height: 30px;background: #fff;">
      <a-breadcrumb-item >
        <router-link to="/">工作台</router-link>
      </a-breadcrumb-item>
      <router-link to="/Accessstatistics">访问统计</router-link>
    </a-breadcrumb>
    <div style="width:100vw;height:100vh;margin: 0 auto;">
      <div
        style="
          width: 84%;
          height: 200px;
          background: #fff;
          margin: 20px 25px;
        "
      >
        <div
          style="
            display: flex;
            justify-content: space-between;

            height: 60px;
            width: 1200px;
            padding: 30px 40px;
          "
        >
          <p>
            IP:
            <input
              type="text"
              style="
                width: 250px;
                border: solid 1px #ccc;
                outline: none;
                height: 30px;
                margin-left: 20px;
              "
              v-model="title"
              placeholder=" 请输入搜索IP"
            />
          </p>
          <p>
            URL：
            <input
              type="text"
              style="
                width: 250px;
                border: solid 1px #ccc;
                outline: none;
                height: 30px;
              "
              v-model="name"
              placeholder=" 请输入URL"
            />
          </p>
          <p>
            地址：
            <input
              type="text"
              style="
                width: 250px;
                border: solid 1px #ccc;
                outline: none;
                height: 30px;
              "
              v-model="dz"
              placeholder=" 请输入地址"
            />
          </p>
        </div>

        <div
          style="
            display: flex;
            justify-content: space-between;

            height: 60px;
            width: 1200px;
            padding: 30px 40px;
          "
        >
          <p>
            数量:
            <input
              type="text"
              style="
                width: 250px;
                border: solid 1px #ccc;
                outline: none;
                height: 30px;
                margin-left: 20px;
              "
              v-model="sl"
              placeholder=" 请输入数量"
            />
          </p>
          <p>
            内核:
            <input
              type="text"
              style="
                width: 250px;
                border: solid 1px #ccc;
                outline: none;
                height: 30px;
              "
              v-model="neihe"
              placeholder=" 请输入内核"
            />
          </p>
          <p>
            浏览器：
            <input
              type="text"
              style="
                width: 250px;
                border: solid 1px #ccc;
                outline: none;
                height: 30px;
              "
              v-model="word"
              placeholder=" 请输入浏览器"
            />
          </p>
        </div>
        <div style="display: flex; margin-left: 1000px">
          <button
            style="
              padding: 3px 15px;
              background: rgb(39, 105, 227);
              color: #fff;
              border: none;
              margin: 20px 10px;
            "
            @click="sos()"
          >搜索</button>

          <button
            style="
              padding: 3px 15px;
              border: solid 1px #ccc;
              background: #fff;
              margin: 20px 10px;
            "
            @click="no()"
          >重置</button>
        </div>
      </div>
      <div
        style="
          width: 84%;
          height: 500px;
          background: #fff;
          margin: 20px 25px;
        "
      >
        <el-table ref="multipleTableRef" :data="list" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="URL" width="200">
            <template #default="scope">
              <a :href="scope.row.url">
                https://creation.shbwyz.com/tag/%E9%98%85%E8%AF%BB
              </a>
            </template>
          </el-table-column>
          <el-table-column label="IP" width="150">
            <template #default="scope">{{ scope.row.ip }}</template>
          </el-table-column>
          <el-table-column label="浏览器" width="180">
            <template #default="scope">{{ scope.row.liu }}</template>
          </el-table-column>
          <el-table-column label="内核" width="120">
            <template #default="scope"
              ><span>{{ scope.row.nei }}</span></template
            >
          </el-table-column>
          <el-table-column label="操作系统" width="120">
            <template #default="scope"
              ><span>{{ scope.row.cao }}</span></template
            >
          </el-table-column>
          <el-table-column label="设备" width="120">
            <template #default="scope"
              ><span>{{ scope.row.she }}</span></template
            >
          </el-table-column>
          <el-table-column label="地址" width="120">
            <template #default="scope"
              ><span>{{ scope.row.di }}</span></template
            >
          </el-table-column>
          <el-table-column label="访问量" width="120">
            <template #default="scope"
              ><span>{{ scope.row.num }}</span></template
            >
          </el-table-column>
          
          <el-table-column label="访问时间" width="120">
            <template #default="scope"
              ><span>{{ scope.row.data }}</span></template
            >
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <a-popconfirm
                v-if="list.length"
                title="确定要删除吗?"
                @confirm="onDelete(scope.row.id)"
              >
                <el-button type="danger">删除</el-button>
              </a-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">


import { defineComponent, onMounted, ref } from "vue";
import {fanglist,fangdel,fangsou} from '../../api'
import { message } from "ant-design-vue";
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '描述',
    dataIndex: 'word',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];
export default defineComponent({
  setup() {
    const name = ref('')
    const title = ref('')
    const word = ref('')
    const dz = ref('')
    const sl = ref('')
    const neihe = ref('')
    const list=ref()
    const data = ref('')
    var d = new Date();  //获取时间
    var hour = d.getHours(); //获取小时
    var minute = d.getMinutes();//获取分 bn
    var second = d.getSeconds();//获取秒
    console.log(d.getFullYear()); //年
    console.log(d.getMonth() + 1);  //月
    console.log(d.getDate())   //日
    console.log(hour, minute, second);  //小时分钟秒
    data.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + ' ' + hour + ':' + minute + ':' + second
  
     onMounted(()=>{
       fanglist().then(res=>{
         console.log(res);
         list.value=res.data.data
       })
     })
      
    const sos = () => {
      const token1 = localStorage.getItem('token1')
      if (token1 === '管理员') {
         fangsou({title,name,dz,sl,neihe,word,data}).then(res=>{
           console.log(res);
           list.value=res.data.data
         })
      } else {
        message.warning('访客无权进行此操作')

      }
    }

    const no = () => {
      name.value = ''
      title.value = ''
      word.value = ''
      dz.value=''
      sl.value=''
      neihe.value=''
      fanglist().then(res=>{
         console.log(res);
         list.value=res.data.data
       })
    }
   
    // 删除列表数据
    const onDelete = (id: any) => {
      const token1 = localStorage.getItem('token1')
      if (token1 === '管理员') {
       
        fangdel({id}).then(res=>{
          // console.log(res);
          console.log(res);
          fanglist().then(res=>{
         console.log(res);
         list.value=res.data.data
       })
        })
      } else {
        message.warning('访客无权进行此操作')
      }
    }



    return {
      list,
      columns,
      onDelete,
      sos,
      name,
      title,
      word,
      no,
      dz,
      sl,
      neihe
    }
  }
})

</script>

<style lang='scss' scoped>
</style>
 